import {createStyles, Theme, withStyles} from "@material-ui/core/styles";
import {WithStyles} from "@material-ui/core/styles/withStyles";
import {Card, Col, List, Row} from "antd";
import * as React from 'react';
import {CardStyle} from '../../component/largeCard';
import {News} from '../../type/CommonData';
import { Link } from "react-router-dom";

const styles = (theme: Theme) =>
    createStyles<"root" | "newText" | "newDate">({
        root: CardStyle,
        newText: {
            flex: 1,
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace:"nowrap"
        },
        newDate: {
            width: "80px"
        }
    });

interface Iprops extends WithStyles<typeof styles> {
    image: string,
    data: News[]
}

class HealthNews extends React.Component<Iprops> {
    public substrDate(date: any) {
        return date.substr(0, 10)
    }

    public render() {
        const {classes} = this.props;
        return (
            <div>
                <Card title="健康资讯"
                      extra={<Link to={"/health-information"}  style={{fontSize:"10px"}}>更多>></Link>}
                      style={{width: "100%"}}
                      className={classes.root}>
                    <Row gutter={20}>
                        {/*左边新闻图片*/}
                        <Col span={11}>
                            <div>
                                <img style={{width: '100%', height: '165px'}} src={this.props.image} alt=""/>
                            </div>
                        </Col>
                        <Col span={13}>
                            <div>
                                <List size="small"
                                      itemLayout="horizontal"
                                      dataSource={this.props.data}
                                      renderItem={(item: News) => (
                                          <List.Item style={{padding: "3px", border: 0}}>
                                              <div className={classes.newText}>
                                                  {item.title}
                                              </div>
                                              <div className={classes.newDate}>
                                                  {this.substrDate(item.updateTime)}
                                              </div>
                                          </List.Item>
                                      )}
                                />
                            </div>
                        </Col>
                    </Row>
                </Card>
            </div>
        )
    }
}

export default withStyles(styles)(HealthNews)
